<template>
	<div class="page">
		<div class="wos-menu wos-hand" >
			<div :class="menu === '视频检测' ? 'active' : '' " @click="menu = '视频检测'">视频检测</div>
			<div :class="menu === '报警设置' ? 'active' : '' " @click="menu = '报警设置'">报警设置</div>
			<div :class="menu === '异常处理' ? 'active' : '' " @click="menu = '异常处理'">异常处理</div>
		</div>
		<div v-show="menu === '视频检测'" style="margin: 40px 10px;height:620px" >
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">视频检测</div>
				<div>
					<select class="wos-input wos-select">
						<option value="">动态检测</option>
						<option value="">视频丢失</option>
						<option value="">视遮挡检测</option>
					</select>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox"></div>
				<div class="wos-form-title wos-font-bold">视频检测</div>
				<div>
					<select class="wos-input wos-select">
						<option value="">3</option>
						<option value="">1</option>
						<option value="">2</option>
					</select>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">布撤防时间段</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">去抖动</div>
				<div>
					<input type="text" value="5" class="wos-input"> &nbsp; 秒（0-600）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">区域</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox" checked></div>
				<div class="wos-form-title wos-font-bold">录像通道</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">录像级别</div>
				<div>
					<input type="text" value="10" class="wos-input"> &nbsp; 秒（10-300）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox" ></div>
				<div class="wos-form-title wos-font-bold">云台联动</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox" ></div>
				<div class="wos-form-title wos-font-bold">抓图</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="mr-10"><input type="checkbox" >发送EMAIL</div>
				<div class="mr-10"><input type="checkbox" >报警上传</div>
				<div class="mr-10"><input type="checkbox" >蜂鸣</div>
				<div class="mr-10"><input type="checkbox" >日志</div>
			</div>
		</div>





		<div v-show="menu === '报警设置'" style="margin: 40px 10px;height:620px" >
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">报警设置</div>
				<div>
					<select class="wos-input wos-select">
						<option value="">IPC外部报警</option>
						<option value="">IPC断网报警</option>
					</select>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox"></div>
				<div class="wos-form-title wos-font-bold">通道</div>
				<div class="mr-10">
					<select class="wos-input wos-select">
						<option value="">3</option>
						<option value="">1</option>
						<option value="">2</option>
					</select>
				</div>
				<div class="wos-form-title wos-font-bold">报警名称</div>
				<div>
					<input type="text" value="" class="wos-input">
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">布撤防时间段</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">去抖动</div>
				<div>
					<input type="text" value="5" class="wos-input"> &nbsp; 秒（0-600）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title wos-font-bold">设备类型</div>
				<div>
					<select class="wos-input wos-select">
						<option value="">常开型</option>
						<option value="">常流型</option>
					</select>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox" checked></div>
				<div class="wos-form-title">录像通道</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"></div>
				<div class="wos-form-title">录像级别</div>
				<div>
					<input type="text" value="10" class="wos-input"> &nbsp; 秒（10-300）
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox" ></div>
				<div class="wos-form-title">云台联动</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="wos-checkbox mr-10"><input type="checkbox" ></div>
				<div class="wos-form-title">抓图</div>
				<div>
					<button class="wos-btn wos-btn-no">设置</button>
				</div>
			</div>
			<div class="wos-flex mb-20">
				<div class="mr-10"><input type="checkbox" >发送EMAIL</div>
				<div class="mr-10"><input type="checkbox" >报警上传</div>
				<div class="mr-10"><input type="checkbox" >蜂鸣</div>
				<div class="mr-10"><input type="checkbox" >日志</div>
			</div>
		</div>

		<div v-show="menu === '异常处理'" style="margin: 40px 10px;height:620px" >
			<img src="../../assets/images/temp-2.png" alt="">
		</div>


		<div class="console">
			<button>应用到</button>
			<button>默认</button>
			<button class="active">确定</button>
			<button>刷新</button>
		</div>
	</div>
</template>

<script>
    export default {
        name: "events",
	    data:function(){
            return {
                menu : "视频检测"
            }
	    }
    }
</script>

<style scoped>

</style>
